<template>
	<view class="page">
		<view class="top">
			<view @click="goBackPage" v-show="isInput">
				<uni-icons type="back" size="20"></uni-icons>
			</view>
			<view @click="clearKey" v-show="!isInput">
				<uni-icons type="close" size="20"></uni-icons>
			</view>
			<input type="text" v-model="keyWord" placeholder="大家都在搜:" @focus="openSearch" @input="getSearch"/>
			<view class="clearInput" @click="keyWord=''">x</view>
		</view>
		<view class="searchKey" v-show="searchBox">
			<view v-for="v in keyList" @click="searchGoods(v)">{{v.name}}</view>
		</view>
		<search v-if="showSearch" :onLoadGood="onLoadGood" :keyWord="keyWord"></search>
		<view class="body" v-else>
			<view class="recommend">
				<view>为你推荐</view>
				<view>
					<view v-for="(v,i) in goodClass" @click="searchNavTo(v)">{{v.fl}}</view>
				</view>
			</view>
			<view class="record">
				<view>
					<text>最近搜索</text>
					<text>清空</text>
				</view>
				<view>
					<view>冲锋衣<text>x</text></view>
					<view>户外水杯<text>x</text></view>
					<view>背包<text>x</text></view>
				</view>
			</view>
		</view>	
	</view>
</template>

<script>
	import http from '../../until/http';
	import search from './search.vue';
	import {reactive,toRefs,onMounted} from 'vue';
	import {mapMutations} from 'vuex';
	export default {
		setup() {
			let data=reactive({
				classid:0,
				goodClass:[],
				searchBox:false,
				searchHeight:uni.getSystemInfoSync().screenHeight,
				showSearch:true,
				isInput:true,
				keyWord:'',
				keyList:[],
				onLoadGood:0,
				scrollY:uni.getSystemInfoSync().screenHeight*0.03,
				goBackPage:()=>{
					uni.redirectTo({url:'/pages/mall/mall'});
				},
				openSearch:()=>{
					data.showSearch=false;
					data.isInput=false;
					data.searchBox=true;
				},
				closeSearch:()=>{
					if(data.keyList.length>0){
						data.searchBox=false;
					}
				},
				clearKey:()=>{
					data.keyWord='';
					data.showSearch=true;
					data.searchBox=false;
					data.isInput=true;
					data.scrollY=data.searchHeight*0.05;
				},
				getSearch:()=>{
					if(data.keyWord){
						http({
							url:'/goodst/goodkey',
							data:{
								keyWord:data.keyWord,
								classid:data.classid
							}
						}).then((res)=>{
							if(res.data.code==200){
								data.keyList={...res.data.data}
							}
						})
					}else{
						data.keyList=[]
					}
				},
				searchNavTo:(v)=>{
					uni.redirectTo({url:'/pages/allgoods/allgoods?classid='+v.id+'&title='+v.fl})
				}
			});
			return {...toRefs(data)}
		},
		components:{
			search
		},
		methods:{
			...mapMutations('good', ['setGoodClass','setKeyWord']),
			searchGoods(v){
				this.keyWord=v.name;
				this.showSearch=true;
				this.searchBox=false;
				this.scrollY=this.searchHeight*0.05;
			},
		},
		onPageScroll(e){
			if(e.scrollTop>this.scrollY){
				this.onLoadGood++;
				this.scrollY+=500;
			}
		},
		onLoad(e) {
			this.setGoodClass(e.classid);
			this.classid=e.classid;
			uni.setNavigationBarTitle({
				title: e.title
			});
			if(e.showSearch=="false"){
				this.showSearch=false;
				this.isInput=false;
			}else{
				this.showSearch=true
				this.isInput=true;
			};
			http({
				url:'/goodst/getclass',	
			}).then((res)=>{
				this.goodClass={...res.data.data}
			})
		}
	}
</script>

<style lang="less" scoped>
	.page{
		position: relative;
		overflow-x: hidden;
	}
	.top{
		width: 750rpx;
		height: 80rpx;
		display: flex;
		padding: 10rpx;
		background-color:white;
		border-bottom:1px solid rgb(204,204,204) ;
		border-radius: 10rpx;
		position: fixed;
		z-index: 2;
		view{
			width: 80rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
		}
		input{
			width: 620rpx;
			height: 80rpx;
			background-color: rgb(250,250,250);
			padding: 0 10rpx;
		}
	}
	.clearInput{
		height: 80rpx;
		width: 40rpx;
		position: absolute;
		z-index: 1;
		right: 30rpx;
		text-align: center;
	}
	.searchKey{
		position: absolute;
		top:100rpx;
		left:90rpx;
		z-index: 2;
		view{
			width: 640rpx;
			height: 60rpx;
			line-height: 60rpx;
			background-color: rgb(250,250,250);
			border: 1px solid rgb(204,204,204);
		}
	}
	.body{
		padding: 20rpx;
		margin: 100rpx 0;
	}
	.recommend{
		view:first-child{
			font-size: 14px;
		}
		view:nth-child(2){
			font-size: 16px;
			padding: 0;
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 20rpx;
			list-style-type: none;
			view{
				font-size: 16px;
				height: 40rpx;
				line-height: 40rpx;
				padding: 0 20rpx;
				margin: 20rpx;
				border: 1px solid black;
				border-radius: 40rpx;
			}
		}
	}
	.record{
		view:first-child{
			position: relative;
			height: 40rpx;
			line-height: 40rpx;
			font-size: 14px;
			text:nth-child(2){
				position: absolute;
				right: 10rpx;
				font-size: 12px;
			}
		}
		view:nth-child(2){
			padding: 0;
			list-style-type: none;
			view{
				font-size: 16px;
				height: 80rpx;
				line-height: 80rpx;
				border-bottom: 1px solid rgb(228,228,228);
				position: relative;
				text{
					position: absolute;
					right: 10rpx;
				}
			}
		}
	}
	
</style>
